<template>
    <div class="chusheDetail">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>项目申报</el-breadcrumb-item>
            <el-breadcrumb-item>年度计划申报</el-breadcrumb-item>
            <el-breadcrumb-item>查看</el-breadcrumb-item>
        </el-breadcrumb>
       <div class="head">
            <div class="left">
                <h3 class="title">长沙市2020年交通局专项发展规划 <span style="margin-left: 20px;font-size: 14px; color: #999999;">CS-2019-JTJ-0001</span></h3>
                <ul class="tag">
                    <li>
                        <span>创建人：</span>
                        <i></i>
                    </li>
                    <li>
                        <span>创建时间：</span>
                        <i></i>
                    </li>
                </ul>
            </div>
            <div class="right">
                <el-button type="primary" @click="edit()">编辑</el-button>
            </div>
        </div>
        <div class="basicInfo">
            <h3 class="title">
                <i></i>
                基本信息
                <el-button type="primary" @click="change()">变更调整</el-button>
            </h3>
            <el-row>
                <el-col :span="12">
                    <label>项目名称</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>项目编号</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>项目编码</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>项目性质</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>项目类型</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label></label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>计划开始时间</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>计划结束时间</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>所属规划</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>规划类型</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>报送单位</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>报送时间</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>项目联系人</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>项目联系人电话</label>
                    <span></span>
                </el-col>
                 <el-col :span="24" class="compileAttachmentFileList">
                         <label class="other">附件</label>
                         <div class="fileList">
                             <p>
                                 <i class="el-icon-link"/><span style="color:#4967CF;">长沙市2020年公路运输系统升级项目.pdf</span> <i class="el-icon-download" style="cursor: pointer;margin-left: 20px;color: #4967CF; font-size: 20px;"/>
                             </p>
                             <p>
                                 <i class="el-icon-link"/><span style="color:#4967CF;">长沙市2020年公路运输系统升级项目.pdf</span> <i class="el-icon-download" style="cursor: pointer;margin-left: 20px;color: #4967CF; font-size: 20px;"/>
                             </p>
                             <p>
                                 <i class="el-icon-link"/><span style="color:#4967CF;">长沙市2020年公路运输系统升级项目.pdf</span> <i class="el-icon-download" style="cursor: pointer;margin-left: 20px;color: #4967CF; font-size: 20px;"/>
                            </p>    
                            </div>
                    </el-col>
                <el-col :span="24">
                    <label class="other">建设内容</label>
                    <span>{{info.remark}}</span>
                </el-col>
            </el-row>
        </div>
        <div class="basicInfo">
            <h3 class="title">
                <i></i>
                申报条件
            </h3>
            <el-row>
                <el-col :span="12">
                    <label>项目概算</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>资金来源</label>
                    <span>财政部</span>
                </el-col>
                <el-col :span="12">
                    <label>可研评审状态</label>
                    <span></span>
                </el-col>
                <el-col :span="12">
                    <label>初设及概算评审状态</label>
                    <span>评审中</span>
                </el-col>
            </el-row>
        </div>
         <Tab />
    </div>
</template>

<script>
/* eslint-disable */
import Tab from '../../../components/Tab'
export default {
    data() {
        return {
			info: {},
            creator: {},
        };
    },
    computed: {
        id() {
            return this.$route.query.id;
        }
    },
    components: {
        Tab
    },
    mounted() {
		this.getDetail();
		this.getCreator()
    },
    methods: {
        edit(){},
        change(){
            
        },
        getDetail() {
            this.axios
                .get("/projectProcess/getOne", { params: { id: this.id } })
                .then(res => {
                    this.info = res.data;
                });
        },
        getProjectName(_state) {
            let state = Number(_state);
            let stateStr = "";
            if (state === 1) {
                stateStr = "全市发展规划";
            } else if (state === 2) {
                stateStr = "专项发展规划";
            } else if (state === 3) {
                stateStr = "软件开发";
            } else if (state === 4) {
                stateStr = "系统集成";
            } else if (state === 5) {
                stateStr = "民政局";
            } else if (state === 6) {
                stateStr = "公安局";
            } else if (state === 7) {
                stateStr = "财政局";
            } else if (state === 8) {
                stateStr = "国税局";
            } else if (state === 9) {
                stateStr = "土地局";
            }
            return stateStr;
        },
        getCreator() {
            this.axios
                .get("/projectProcess/getOne/log", {
                    params: {
                        processId: this.id,
                        actionType: 1
                    }
                })
                .then(res => {
                    if (res.code !== 1000) {
                        this.$message.error(res.message);
                    }
                    this.creator = res.data;
                });
        }
    }
};
</script>

<style lang="less" scoped>
.chusheDetail {
     .head {
        margin: 20px 0;
        padding: 20px;
        background-color: #fff;
        display: flex;
        .title {
            font-size: 24px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }
        .tag {
            display: flex;
            color: #999;
            margin-top: 10px;
            i {
                font-style: initial;
                color: #333;
            }
            li {
                margin-right: 40px;
            }
        }
        .left{
            flex: 1;
            background: #fff;
            padding: 20px 20px 0;
        }
        .right{
            width: 158px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .basicInfo {
        padding: 20px;
        background-color: #fff;
        .title {
            font-size: 18px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            i {
                width: 4px;
                height: 16px;
                display: inline-block;
                background-color: #4967cf;
                margin-right: 6px;
            }
        }
        .el-row {
            border: 1px solid rgba(238, 238, 238, 1);
            border-bottom: none;
            .el-col {
                border-bottom: 1px solid rgba(238, 238, 238, 1);
            }
        }

        label {
            height: 40px;
            line-height: 40px;
            display: inline-block;
            width: 150px;
            background-color: #fafafa;
            text-align: right;
            padding-right: 14px;
            color: #999999;
        }
        .other {
            height: 80px;
        }
        span {
            height: 40px;
            padding-left: 15px;
            color: #333;
        }
        .fileList{
            display: inline-block;
        }
    }
    .log{
        position: relative;
        margin-top: 20px;
        .upDown {
            position: absolute;
            right: 20px;
            top: 5px;
            display: flex;
            width: 70px;
            height: 30px;
            align-items: center;
            background-color: #ffffff;
            justify-content: center;
        }
    }
}
</style>
